import { useState } from 'react'
import { Route, Redirect, RouteProps } from 'react-router-dom'
import style from './index.module.scss'
type props = {
  children: HTMLDivElement
  callBack?: () => void
}
const PullToRefresh = ({ children }: any) => {

  const [top, setTop] = useState(0)
  const [start, setStart] = useState(0)
  const [end, setEnd] = useState(0)
  const [text, setText] = useState('下拉刷新')
  const [animate, setAnimate] = useState(0)
  return (
    <div
      className={style.root}
      onTouchStart={(e) => {
        setStart(e.changedTouches[0].pageY)
        setAnimate(0)
        setEnd(0)
        setText('下拉刷新')
      }}
      onTouchMove={(e) => {
        if (document.documentElement.scrollTop > 0) return

        let y = (e.changedTouches[0].pageY - start) / 4
        if (y > 0) document.documentElement.style.overflow = 'hidden'
        else if (y <= 0) {
          document.documentElement.style.overflow = ''
        }
        setTop(y)
        if (y > 60) {
          setText('释放刷新')
          setEnd(1)
        } else {
          setText('下拉刷新')
          setEnd(0)
        }
      }}
      onTouchEnd={(e) => {
        if (!end) {
          setAnimate(1)
          setTop(0)
          return
        }
        setAnimate(1)
        setTop(50)
        setText('刷新中')
        // callBack && callBack()
        setTimeout(() => {
          setText('刷新完成')
          setTimeout(() => {
            setTop(0)
          }, 1000)
        }, 1000)
      }}
    >
      <div className='top' style={{ height: top, [animate ? 'transition' : '']: '.3s' }}>
        {text}
      </div>
      {children}
    </div>
  )
}
export default PullToRefresh
